<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>用户注册</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .login-container {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 350px;
    }
    .login-container h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .login-btn {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    .login-btn:hover {
      background-color: #45a049;
    }
    .error-message {
      color: red;
      margin-bottom: 15px;
      text-align: center;
    }
    .register-link {
      text-align: center;
      margin-top: 15px;
    }
    #loading {
      display: none;
      text-align: center;
      margin: 10px 0;
    }
  </style>
</head>
<body>
<div class="login-container">
  <h2>用户注册</h2>
  <%--错误信息元素--%>
  <div id="error-message" class="error-message"></div>
  <%--加载中元素--%>
  <div id="loading">注册中，请稍候...</div>

  <form id="loginForm">
    <div class="form-group">
      <label for="username">用户名</label>
      <input type="text" id="username" name="username" required placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" id="password" name="password" required placeholder="请输入密码">
    </div>
    <div class="form-group">
    <label for="email">邮箱</label>
    <input type="password" id="email" name="password" required placeholder="请输入邮箱">
  </div>
    <button type="button" id="registerBtn" class="login-btn">注册</button>
  </form>

  <div class="register-link">
    已有账号？<a href="<%= request.getContextPath() %>/login">立即登录</a>
  </div>
</div>
<%--调用axios库请全部使用这个库来进行请求，不推荐使用原生的XMLHttpRequest对象--%>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  // 点击按钮后实现登录功能
  document.getElementById('registerBtn').addEventListener('click', function() {
    // 获取用户名
    const username = document.getElementById('username').value;
    // 获取密码
    const password = document.getElementById('password').value;
    // 获取邮箱
    const email = document.getElementById('email').value;
    // 获取错误信息元素
    const errorElement = document.getElementById('error-message');
    // 获取加载中元素
    const loadingElement = document.getElementById('loading');

    // 清除之前的错误信息
    errorElement.textContent = '';

    // 显示加载中
    loadingElement.style.display = 'block';

    // 构建请求数据
    const user = {
      username: username,
      password: password,
      email: email
    };
    //判断是否为空
    if (!username || !password || !email) {
      errorElement.textContent = '用户名、密码、邮箱不能为空';
      loadingElement.style.display = 'none';
      //退出函数
      return;
    }
    // 发送登录请求
    axios.post('<%= request.getContextPath() %>/user/register', JSON.stringify(user), {
      /*以json格式发送请求*/
      headers: {
        'Content-Type': 'application/json'  // 明确指定Content-Type
      }
    })
            .then(function(response) {
              loadingElement.style.display = 'none';
              if (response.data.code === 200) {
                // 注册成功
                errorElement.textContent = response.data.msg;
                // 注册成功，跳转到登录页面 2秒后跳转
                setTimeout(
                        function() {
                          window.location.href = '<%= request.getContextPath() %>/login';
                        }, 2000
                )
              } else {
                errorElement.textContent = response.data.msg;
              }
            })
            .catch(function(error) {
              loadingElement.style.display = 'none';
              console.error('注册出错:', error);
              if (error.response) {
                // 服务器返回了错误状态码
                if (error.response.status === 415) {
                  errorElement.textContent = '服务器不支持请求的格式';
                } else {
                  errorElement.textContent = error.response.data.message || '注册失败';
                }
              } else {
                errorElement.textContent = '网络错误，请检查连接';
              }
            });
  });

  // 添加回车键注册功能
  document.getElementById('email').addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
      document.getElementById('registerBtn').click();
    }
  });
</script>
</body>
</html>